<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/echarts.min.js" ></script>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<title></title>
		<script>
			function goBackChinaMap(){
				$('#china_map').css('display','block');
        		$('#city_map').css('display','none');
				$('#proe_map').css('display','none');
			}
			function goBackProeMap(){
				$('#china_map').css('display','none');
        		$('#city_map').css('display','none');
				$('#proe_map').css('display','block');
			}
		</script>
	</head>
	<body>
		
		<div id="main" style="height:650px;width:1300px;margin:50px auto;border:1px solid #ccc;background: #f2f2f2;position: relative;">
			<div id="china_map" style="width:960px;height:650px;margin:0 auto;position: absolute;top:10px;left:80px;display: block;"></div>
			<div id="proe_map" style="width:960px;height:650px;margin:0 auto;position: absolute;top:10px;left:80px;display: none;"></div>
			<div id="city_map" style="width:960px;height:650px;margin:0 auto;position: absolute;top:10px;left:80px;display: none;"></div>
			<div class="retPro" style="z-index:999;position: absolute;top:50px;left:10px;display: block;">
						<a href="javascript:void(0);" onclick="goBackChinaMap()" style="height:30px;background:#fff;line-height: 30px;border:1px solid #ccc;padding:5px 10px;margin-left:20px;border-radius:5px;cursor: pointer;color:#393939;text-decoration:none;">
							返回全国
						</a>
			</div>
			<div class="retPro" style="z-index:999;position: absolute;top:50px;left:110px;display: block;">
						<a href="javascript:void(0);" onclick="goBackProeMap()" style="height:30px;background:#fff;line-height: 30px;border:1px solid #ccc;padding:5px 10px;margin-left:20px;border-radius:5px;cursor: pointer;color:#393939;text-decoration:none;">
							返回本省
						</a>
			</div>
		</div>
			
		<script>
			$().ready(function(){
			 

				var geoCoordMap = {
    "郑州":[113.65,34.76]
};
 
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push(geoCoord.concat(data[i].value));
        }
    }
    return res;
};
				   $.get('json/广东/广州市.json', function (mapJson) {
						echarts.registerMap('河南', mapJson);
						var chart = echarts.init(document.getElementById('china_map'));//在id为mainMap的dom元素中显示地图
						var option={
							visualMap: {
								min: 0,
								max: 500,
								splitNumber: 5,
								inRange: {
									color: ['#d94e5d','#eac736','#50a3ba'].reverse()
								},
								textStyle: {
									color: '#fff'
								}
							},
							geo: {
								map: '河南'
							},
							series: [{
								name: '活跃人数分布',
								type: 'heatmap',
								coordinateSystem: 'geo',
								data: convertData([
									{name: "郑州", value: 813}])
							}]
				
				
					}
					  	chart.setOption(option);
		
				});
	
						})
						</script>
	</body>
</html>